<!--
 * @Author: your name
 * @Date: 2021-01-11 17:20:07
 * @LastEditTime: 2021-01-12 14:17:28
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \sende_nuxt\pages\lenses\index\lenIndex.vue
-->
<template>
    <div class="lens_Index mb100">
        <div class="mb30">
            <h3 class="size24 b mb10 ptb10">{{$t("What is the lens index?")}}</h3>
            <p class="size14 b mb10">{{$t("Lens index is a number that describes how thick or thin your lenses are. The higher a lens' index is, the thinner it becomes.")}}</p>
            <p class="size14 b mb10">{{$t("Higher prescriptions require higher index lenses, while lower prescriptions require lower index lenses.")}}</p>
        </div>
        <div class="mb100">
            <h3 class="size24 b mb10 ptb10">{{$t("What is a high refractive index lens? What's the difference?")}}</h3>
            <p class="size14 b mb10">{{$t("The difference in refractive index of the lens will affect the function and price.")}}</p>
            <p class="size14 b mb10">{{$t("The lower the refractive index, the thicker the thickness.")}}</p>
            <p class="size14 b mb10">{{$t("Of course, the price is cheaper, but it can only meet the requirements of low vision correction.")}}</p>
            <p class="size14 b mb10">{{$t("The higher the refractive index, the thinner the lens and the higher the price, which can meet a variety of vision correction needs.")}}</p>
        </div>
        <div class="flex lens_index_type mb60">
            <div class="s4 index_type_item mb20 ptb15">
                <div class="s12 index_type_pic text_l mb20">
                    <img class="b999" :src="require('@/assets/image/lenses/type_pic_1.png')" alt="">
                </div>
                <div class="index_type_desc s12">
                    <h2 class="size18 bg-theme b mb10">1.50 {{$t("Standard Index")}}</h2>
                    <p class="size14 b mb10">{{$t("Suitable for Low prescriptions of")}}</p>
                    <p class="size14 b mb10">SPH (0 to +/-2.0) {{$t("and")}} CYL (0 to +/-1.5).</p>
                    <p class="size14 b mb10">{{$t("If your prescription is higher, then you need")}}</p>
                    <p class="size14 b mb10">{{$t("to upgrade to a high refractive index lens")}}</p> 
                </div>
            </div>
            <div class="s4 index_type_item mb20 ptb15">
                <div class="s12 index_type_pic text_l mb20">
                    <img class="b999" :src="require('@/assets/image/lenses/type_pic_2.png')" alt="">
                </div>
                <div class="index_type_desc s12">
                    <h2 class="size18 bg-theme b mb10">1.56 {{$t("Standard Index")}}</h2>
                    <p class="size14 b mb10">{{$t("Most suitable for Low prescriptions of SPH")}}</p>
                    <p class="size14 b mb10">(0 to +/-2.0) {{$t("and")}} CYL (0 to +/-1.5).</p>
                </div>
            </div>
            <div class="s4 index_type_item mb20 ptb15">
                <div class="s12 index_type_pic text_l mb20">
                    <img class="b999" :src="require('@/assets/image/lenses/type_pic_3.png')" alt="">
                </div>
                <div class="index_type_desc s12">
                    <h2 class="size18 bg-theme b mb10">1.59 {{$t("Standard Index")}}</h2>
                    <p class="size14 b mb10">{{$t("Suitable Low-to-moderate prescriptions of SPH")}}</p>
                    <p class="size14 b mb10">(+/-2.0 to +/-4.0) {{$t("and")}} CYL (+/-1.5 to +/-2.0). </p>
                </div>
            </div>
            <div class="s4 index_type_item mb20 ptb15">
                <div class="s12 index_type_pic text_l mb20">
                    <img class="b999" :src="require('@/assets/image/lenses/type_pic_4.png')" alt="">
                </div>
                <div class="index_type_desc s12">
                    <h2 class="size18 bg-theme b mb10">1.61 {{$t("High Index - Super Thin")}} <span style="color:#f08905;" class="size12">({{$t("Recommend")}})</span></h2>
                    <p class="size14 b mb10">{{$t("Thin Light lenses offer the best value")}}</p>
                    <p class="size14 b mb10">{{$t("for people who have moderate prescriptions")}}</p>
                    <p class="size14 b mb10">{{$t("and want a light lens. It is suitable for prescriptions")}}</p>
                    <p class="size14 b mb10">{{$t("of")}}  SPH(+/-4.0 to +/-6.0 ),CYL(+/-2.25 to +/-3.0).</p>
                </div>
            </div>
            <div class="s4 index_type_item mb20 ptb15">
                <div class="s12 index_type_pic text_l mb20">
                    <img class="b999" :src="require('@/assets/image/lenses/type_pic_5.png')" alt="">
                </div>
                <div class="index_type_desc s12">
                    <h2 class="size18 bg-theme b mb10">1.67 {{$t("High Index - Ultra Thin")}}</h2>
                    <p class="size14 b mb10">{{$t("These lenses are great for people with")}}</p>
                    <p class="size14 b mb10">{{$t("moderate-to-high prescriptions. And are recommended")}}</p>
                    <p class="size14 b mb10">{{$t("of  prescriptions of")}} SPH (+/-6.0 to +/-9.0),</p>
                    <p class="size14 b mb10">CYL (+/-3.25 to +/-4.0) {{$t("for the best results.")}}</p>
                </div>
            </div>
            <div class="s4 index_type_item mb20 ptb15">
                <div class="s12 index_type_pic text_l mb20">
                    <img class="b999" :src="require('@/assets/image/lenses/type_pic_6.png')" alt="">
                </div>
                <div class="index_type_desc s12">
                    <h2 class="size18 bg-theme b mb10">1.74  {{$t("High Index - Ultra Thin")}}</h2>
                    <p class="size14 b mb10">{{$t("This specification is the thinnest and lightest")}}</p>
                    <p class="size14 b mb10">{{$t("prescription lenses.")}}</p>
                    <p class="size14 b mb10">{{$t("Suitable for prescriptions of SPH above ")}}+/-9.0,</p>
                    <p class="size14 b mb10">CYL above +/-4.25.{{$t("CYL above")}}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'lenIndex'
}
</script>